<template>
    <div>
        <div class="company-item" v-for="item in productList" :key="item.id" @click="jumpData(item)">
            <div class="company-item-div">
                <img class="company-item-logo" :src="item.company_logo_url" alt="" />
                <div class="company-item-conternt">
                    <div class="company-item-flex">
                        <div class="company-item-title">{{ item.company_name }}</div>
                        <img class="company-item-shili" src="@/static/engineering5188/company/shili.png" v-if="item.is_strength" alt="" />
                        <img class="company-item-real" src="@/static/engineering5188/company/real.png" v-if="item.is_verify" alt="" />
                    </div>
                    <div style="display: flex;align-items: center;">
                        <img class="company-item-address-icon"
                            src="@/static/engineering5188/goodsAndServices/address.png" />
                        <span class="company-item-address">{{ item.province }}{{ item.city }}{{ item.district }}</span>
                    </div>
                    <div class="company-item-info-list">
                        <div class="company-item-info">
                            <div class="company-item-info-label">成立时间</div>
                            <div class="company-item-info-text">{{ item.register_time }}</div>
                        </div>
                        <div class="company-item-info text-center text-border">
                            <div class="company-item-info-label">注册资本</div>
                            <div class="company-item-info-text">{{ item.registered_capital }}</div>
                        </div>
                        <div class="company-item-info text-center">
                            <div class="company-item-info-label">主要品牌</div>
                            <div class="company-item-info-text">{{ item.company_brands }}</div>
                        </div>
                    </div>
                    <div class="headerData-content-zhuying">
                        <img class="zhuyingIcon" src="@/static/engineering5188/company/zhuying.png" alt="">
                        <div class="zhuyingname">主营：</div>
                        <div class="zhuyingnametext">{{ item.company_products }}</div>
                    </div>
                </div>
            </div>
            <div style="display: flex;">
                <div class="company-item-imgList" v-for="subitem in item.product">
                    <img class="company-item-imgList-logo" :src="subitem.image" alt="" />
                    <div class="company-item-imgList-text">{{ subitem.title }}</div>
                </div>
                <!-- <div class="company-item-imgList">
                    <img class="company-item-imgList-logo" src="@/static/engineering5188/company/2.png" alt="" />
                    <div class="company-item-imgList-text">sss</div>
                </div> -->
            </div>
        </div>
        <div class="nodata" v-if="productList.length == 0">暂无数据</div>

        

        <div class="pageClass" v-if="productList.length > 0">
            <div class="pageClass-first" @click="LoadFistData">首页</div>
            <div class="pageClass-Last" @click="LoadLastData">上一页</div>
            <template v-if="totalPage < 6">
                <div :class="{ 'pageClass-num': true, 'active': currentPage == 1 }" @click="loadPageData(1)"
                    v-if="totalPage >= 1">1</div>
                <div :class="{ 'pageClass-num': true, 'active': currentPage == 2 }" @click="loadPageData(2)"
                    v-if="totalPage >= 2">2</div>
                <div :class="{ 'pageClass-num': true, 'active': currentPage == 3 }" @click="loadPageData(3)"
                    v-if="totalPage >= 3">3</div>
                <div :class="{ 'pageClass-num': true, 'active': currentPage == 4 }" @click="loadPageData(4)"
                    v-if="totalPage >= 4">4</div>
                <div :class="{ 'pageClass-num': true, 'active': currentPage == 5 }" @click="loadPageData(5)"
                    v-if="totalPage >= 5">5</div>
                <div :class="{ 'pageClass-num': true, 'active': currentPage == 6 }" @click="loadPageData(6)"
                    v-if="totalPage >= 6">6</div>
            </template>
            <template v-else>
                <div :class="{ 'pageClass-num': true, 'active': currentPage == 1 }" @click="loadPageData(1)">1
                </div>
                <div :class="{ 'pageClass-num': true, 'active': currentPage == 2 }" @click="loadPageData(2)">2
                </div>
                <div class="pageShenLue">...</div>
                <div :class="{ 'pageClass-num': true, 'active': currentPage == totalPage - 1 }"
                    @click="loadPageData(totalPage - 1)">{{ totalPage - 1 }}</div>
                <div :class="{ 'pageClass-num': true, 'active': currentPage == totalPage }"
                    @click="loadPageData(totalPage)">{{ totalPage }}</div>
            </template>
            <div class="pageClass-Last" @click="LoadNextData">下一页</div>
            <div class="pageClass-first" @click="LoadEndData">末页</div>
        </div>
    </div>
</template>

<script>

import { mapState } from "vuex";
export default {
    components: {

    },
    props: {
    queryData: {
      type: Object,
      required: true,
    }
  },
    data() {
        return {
            productList: [],
            totalPage: 0,
            currentPage: 1,
        };
    },
    computed: {
        ...mapState([
            "userInfo",
        ]),
    },
    watch: {
        queryData(newVal) {
          this.getProductList(newVal);
        },
    },

    created() {
        this.getProductList(this.queryData)
    },

    methods: {
        jumpData(item){
            this.$router.push('/companyInfo/index?shop_id='+item.id)
        },
        getProductList(val) {
            this.$httpApi("/api/getShopList", {
                page: 1,
                limit:10,
                ...val
            }, "get").then(res =>{
                this.productList = res.data.list;
                this.totalPage = Math.ceil(res.data.count / 10);
            })
        },
        LoadFistData() {
            this.currentPage = 1;
            this.getProductList();
        },
        LoadLastData() {
            if (this.currentPage > 1) {
                this.currentPage--;
                this.getProductList();
            }
        },
        LoadNextData() {
            if (this.currentPage < this.totalPage) {
                this.currentPage++;
                this.getProductList();
            }
        },
        LoadEndData() {
            this.currentPage = this.totalPage;
            this.getProductList();
        },
        loadPageData(val) {
            this.currentPage = val;
            this.getProductList();
        },
        lastProduct(){
            if(this.currentIndex > 0){
                this.currentIndex--;
            } else {
                alertErr('已经是第一个产品了'); 
            }
        },
        NextProduct(){
            if(this.currentIndex < this.productList.length - 1){
                this.currentIndex++;
            } else {
                alertErr('已经是最后一个产品了');
            }
        }


    },
};
</script>
<style scoped lang="less">
.company-item {
    width: 1400px;
    height: 185px;
    padding: 24px;
    background-color: #FFFFFF;
    margin-top: 11px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;

    .company-item-logo {
        width: 223px;
        height: 137px;
        margin-right: 30px;
    }

    .company-item-div {
        display: flex;
    }

    .company-item-title {
        font-weight: 500;
        font-size: 18px;
        color: #000000;
        line-height: 22px;
    }

    .company-item-shili {
        width: 56px;
        height: 20px;
        margin-left: 10px;
    }

    .company-item-real {
        width: 104px;
        height: 20px;
        margin-left: 10px;
    }

    .company-item-flex {
        display: flex;
    }

    .company-item-address-icon {
        width: 12px;
        height: 16px;
        margin-right: 10px;
    }

    .company-item-address {
        font-weight: 400;
        font-size: 14px;
        color: #858585;
        line-height: 22px;
    }

    .company-item-info-label {
        font-weight: 400;
        font-size: 12px;
        color: #666666;
    }

    .company-item-info-text {
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        line-height: 24px;
    }

    .company-item-info {
        width: 127px;
    }

    .company-item-info-list {
        display: flex;
        align-items: center;
    }

    .text-center {
        text-align: center;
    }

    .text-border {
        border-right: 1px solid #EEEEEE;
        border-left: 1px solid #EEEEEE;
    }

    .zhuyingIcon {
        width: 12px;
        height: 12px;
        margin-right: 10px;
    }

    .zhuyingname {
        color: #858585;
        font-weight: 400;
        font-size: 14px;
    }

    .zhuyingnametext {
        width: 380px;
        /* 限制宽度 */
        white-space: nowrap;
        /* 防止换行 */
        overflow: hidden;
        /* 隐藏溢出的内容 */
        text-overflow: ellipsis;
        /* 显示省略号 */
    }

    .headerData-content-zhuying {
        display: flex;
        align-items: center;
    }

    .company-item-conternt {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .company-item-imgList {
        width: 168px;
        height: 137px;
        background: #FFFFFF;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #E5E5E5;
        margin-left: 20px;
    }

    .company-item-imgList-logo {
        width: 100%;
        height: 102px;
    }

    .company-item-imgList-text {
        font-weight: 400;
        font-size: 14px;
        color: #000000;
        line-height: 31px;
        margin-left: 12px;
        width: 168px;
        /* 限制宽度 */
        white-space: nowrap;
        /* 防止换行 */
        overflow: hidden;
        /* 隐藏溢出的内容 */
        text-overflow: ellipsis;
        /* 显示省略号 */
    }

 
}

.nodata{
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    text-align: center;
    width: 100%;
    margin-top: 20px;
    padding-bottom: 20px;
}

.pageClass {
    display: flex;
    margin-top: 26px;
    justify-content: center;
    padding-bottom: 26px;

    .pageClass-first {
        width: 40px;
        height: 32px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #EEEEEE;
        font-weight: normal;
        font-size: 14px;
        color: #7A7A7A;
        line-height: 32px;
        text-align: center;
        margin-right: 16px;
        cursor: pointer;
    }

    .pageClass-Last {
        width: 69px;
        height: 32px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #EEEEEE;
        font-weight: normal;
        font-size: 14px;
        color: #7A7A7A;
        line-height: 32px;
        text-align: center;
        margin-right: 10px;
        cursor: pointer;
    }

    .pageClass-num {
        width: 32px;
        height: 32px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #EEEEEE;
        font-weight: normal;
        font-size: 14px;
        color: #7A7A7A;
        line-height: 32px;
        text-align: center;
        margin-right: 10px;
        cursor: pointer;
    }

    .pageShenLue {
        font-weight: normal;
        font-size: 14px;
        color: #7A7A7A;
        margin-right: 10px;
    }

    .active {
        background: #31A41B;
        color: #FFF;
    }
}



.companysInfo {
    height: auto;
    display: flex;
    max-width: @engineerwidth;
    flex-direction: column;

    .list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .list-item {
            margin-top: 20px;
            margin-right: 20px;
            display: flex;
            width: 264px;
            flex-direction: column;
            border: 1px solid #F2F2F2;
            background-color: #fff;

            .company-icon {
                width: 264px;
                height: 162px;
            }

            .material {
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                font-size: 14px;
                color: #000000;
                text-align: left;
                font-style: normal;
                margin-top: 12px;
                margin-left: 12px;
                margin-right: 12px;
            }

            .name {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #858585;
                text-align: left;
                margin: 12px;
            }

            .info {
                background: #FFFFFF;
                border-radius: 0px 0px 0px 0px;
                border: 1px solid #E5E5E5;
                display: flex;
                justify-content: space-between;
                padding: 10px 12px;

                img {
                    width: 12px;
                    height: 16px;

                }

                .address {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #858585;
                    text-align: left;
                    margin-left: 8px;
                }

                .date {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #666666;
                    text-align: right;
                    font-style: normal;
                }
            }

            &:nth-child(5n) {
                margin-right: 0px !important;
            }
        }
    }

}
</style>